// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import readObj from './components/readObj.vue'
import readArray from './components/readArray.vue'
import readComponent from './components/readComponent.vue'
import baseComponent from './components/base.vue'
import formComponent from './components/form.vue'

Vue.config.productionTip = false

// 全局注册组件
// Vue.component('my-header',{
//   template:`<p>this is my header </p>`
// });

var myHeaderChild={
  template:`<p>this is my header </p>`
};

var myHeader={
  template:`<p v-html="test" @click="" @keydown.entry="">
  <my-header-child></my-header-child>
  </p>`,
  components:{
    'my-header-child':myHeaderChild
  },
  // method:[
  //   function test(){
  //     return "";
  //   }
  // ]
  // data:{  // 这种写法会造成当前页面引用的所有该组件的数据错误。
  //         // 比如更改了a的值，当前页所引用的所有myheader组件的a都会被更改。
  //   a:1,
  //   b:2
  // }
  data:function(){  // 解决组件引用的数据错误问题
    return {
      test:"this is a test html",
      b:2
    }
  }
}

// 内置组件
var myHeader2={
  template:`<p><component is="my-header-child"></component></p>`,
  components:{
    'my-header-child':myHeaderChild
  }
}

/* eslint-disable no-new */
var vm=new Vue({
  el: '#app',
  // template: '<p>{{data}}</p>',
  data:{
    data:"hi again !!",
    inlinecomponent:'component is inline'
  },
  components:{
    'my-header':myHeader,
    'my-header-2':myHeader2,
    'read-obj':readObj,
    'read-array':readArray,
    'read-component':readComponent,
    'base-component':baseComponent,
    'form-component':formComponent
  }
})

// vm.$data // data
// vm.$on('emit',function(){})//绑定方法


/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   template: '<App/>',
//   components: { App }
// })
